<script setup lang="ts">
import WatchMoreComp from "./WatchMoreComp.vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import type { watchArrType } from "@/freeTypings";
const router = useRouter()
// export default {
const props = defineProps({
  freeUrl: String,
  sexNum: Number,
});

const imgUrl = ref("");
const goodBooks = ref(<watchArrType>{});
const guessYourLike = ref(<watchArrType>{});
const showBu = ref(true);
const imgId = ref(0)
const title = ref("")

// methods: {
const getData = () => {
  if (props.sexNum == 1) {
    axios
      .get(`https://apis.netstart.cn/yunyuedu${props.freeUrl}`)
      .then(({ data: { data } }) => {

        goodBooks.value = data.list[0];
        guessYourLike.value = data.list[1];
      });

    showBu.value = true
  } else {
    axios
      .get(`https://apis.netstart.cn/yunyuedu${props.freeUrl}`)
      .then(({ data: { data } }) => {
        imgUrl.value = data.list[0].banners[0].cover;
        goodBooks.value = data.list[1];
        // console.log(data.list[0]);
        imgId.value =  data.list[0].banners[0].id
        title.value =  data.list[0].banners[0].title
      });

    showBu.value = false
  }
}

defineExpose({
  getData
});

const swipeToBook = (id: any, title: any) => {
  router.push(`/detile/${id}/${title}`);
}
  // },
  onMounted(() => {
  console.log(props.freeUrl);
  getData();
});
// };
</script>

<template>
  <div class="free">
    <img class="topImg" :src="imgUrl" v-if="!showBu" @click="swipeToBook(imgId, title)" />

    <WatchMoreComp :Arr="goodBooks" />
    <WatchMoreComp :Arr="guessYourLike" v-if="showBu" />
  </div>
</template>

<style lang="scss" scoped>
.topImg {
  width: 96vw;
  height: 200px;
  border-radius: 6px;
  margin-left: 2vw;
  margin-top: 8px;
}
</style>